<template>
  <div class="myCharge">
      <div class="myCharge-top"><my-icon class="myCharge-top-i" type="iconfile-exception"></my-icon><span class="myCharge-top-name">{{ i18n("myTasks","我的待办") }}</span>
          <div @click="skipList" class="myCharge-top-more">{{ i18n("more","查看更多") }}<my-icon type="iconjiantou_liebiaoxiangyou"></my-icon></div>
          <div @click="init" class="myCharge-top-more">{{ $ti18('rxList.refreshBtn','刷新') }}<my-icon type="iconjiantou_liebiaoxiangyou"></my-icon></div>
      </div>
      <div class="myCharge-list rx-roll-container">
            <div class="myCharge-common" @click="handleTask(item)" v-for="(item,index) in initializeData" :key="index">
                <div class="myCharge-common-le"><div class="myCharge-common-myicon"><my-icon type="iconVue3jpaas-icon_liucheng"></my-icon></div></div>
                <div class="myCharge-common-ri" :title="item.subject">
                    <div class="myCharge-common-name">{{item.subject}}</div>
                    <div class="myCharge-common-time">{{item.name}}<span style="color: #dedbdb;margin:0px 5px ">|</span>{{item.createTime}}</div>
                </div>
            </div>
      </div>
  </div>
</template>

<script>

import {myChargeApi} from "@/views/modules/column/myCharge/myChargeIndex";
import FlowUtil from "@/views/modules/bpm/js/FlowUtil";
import {
    mapState,
    mapMutations
} from 'vuex';
export default {
    name: "myCharge",
    mixins:[FlowUtil],
    inject:["broadCastChannel"],
    data(){
        return{
            initializeData:[],
        }
    },
    computed:{
        ...mapState({
            navigation: state => state.appSetting.navigation,
            frontType: state => state.appSetting.frontType
        }),
        tabNavs(){
            return this.navigation[this.frontType];
        }
    },
    created(){
        this.init();
        //接收消息处理刷新待办.
        this.broadCastChannel.onmessage = (event) => {
            if(event.data.type=='refreshTask'){
                this.init();
            }
        };
    },
    methods:{
        ...mapMutations('appSetting',['setNavigation','setActiveKey']),
        i18n(name, text, key) {
            return this.$ti18(name, text, "ProcessPortal", key);
        },
        init(){
            let parameter = {
                pageNo:1,
                pageSize:5,
                sortOrder:"asc"
            }
            myChargeApi.myTasks(parameter).then(res=>{
                this.initializeData = res.result.data
            })
        },
        skipList(){
             let name={
                'zh-CN':'我的待办',
                'en-US':'My Charge',
            };
            let obj = {
                collapsed:true,
                key:'MyBpmTaskList',
                title:name,
                showType:'URL',
            }
            this.setActiveKey(obj.key)
            let isIndex = this.tabNavs.findIndex(nav=>{return nav.key == obj.key})
            if(isIndex<0){
                this.navigation[this.frontType].push(obj);
            }
            this.$router.push({
                name:'MyBpmTaskList'
            })
        },
        handleTask(record) {
            this.openInst(record.appId,record.instId,record.taskId);
        },
    },

}
</script>

<style scoped>
.myCharge-common-ri:hover .myCharge-common-name,.myCharge-common-ri:hover .myCharge-common-time{
    color: #4285f4;
}
.myCharge-list{
    padding:20px;
    width: 100%;
    flex: 1;
}
.myCharge{
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;

}
.myCharge-top{
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #e8e8e8;
    padding: 0px 20px;
    display: flex;
    align-items: center;
}

.myCharge-top-i{
    color: #4285f4;
    margin-right: 10px;
    font-size: 25px;
}
.myCharge-top-name{
    font-size: 16px;
    color: #010101;
    font-weight: bold;
    flex: 1;
}
.myCharge-top-more{
    color: #4285f4;
    font-weight: bold;
    font-size: 14px;
    display: flex;
    align-items: center;
    cursor: pointer;
}
.myCharge-top-more i{
    color: #4285f4;
    font-size: 25px;
    width: 10px;
}
.myCharge-common{
    display: flex;
    width: 100%;
    align-items: center;
    margin-bottom: 20px;
    cursor: pointer;
}
.myCharge-common-le{
    width: 40px;
    height: 40px;
    border-radius: 4px;
    background: rgb(66,133,244,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}
.myCharge-common-myicon{
    width: 23px;
    height: 23px;
    background-color: #4285f4;
    display: flex;
    align-items: center;
    justify-content: center;
}
.myCharge-common-myicon i {
    font-size: 20px;
    color: white;
}
.myCharge-common-ri{
    flex: 1;
    overflow: hidden;
    margin-left: 16px;
}
.myCharge-common-name{
    font-size: 14px;
    color: #000000;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.myCharge-common-time{
    font-size: 13px;
    color: rgb(0,0,0,0.65);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
</style>